import { ProForm, ProFormDigit, ProFormInstance, ProFormText } from '@/components/Pro';
import { useIntl } from '@umijs/max';
import { Col, Row, Space } from 'antd';
import React, { useEffect, useRef } from 'react';

type IProps = {
  ACInfo: API.AcInfoDTO | undefined;
  deviceType: string | undefined;
};
const ACParams: React.FC<IProps> = (props) => {
  const { ACInfo, deviceType } = props;
  const intl = useIntl();
  const formRef = useRef<ProFormInstance>(null);
  useEffect(() => {
    formRef?.current?.setFieldsValue(ACInfo);
  }, [ACInfo]);
  return (
    <>
      <ProForm
        formRef={formRef}
        layout={'horizontal'}
        disabled={true}
        submitter={false}
        colon={false}
        labelCol={{
          span: 8,
        }}
      >
        {deviceType === 'PCS' ? (
          <>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormDigit
                  name={'ratedPower'}
                  label={intl.formatMessage({ id: 'device.ratedPower' })}
                  rules={[{ required: true, message: '请输入额定功率' }]}
                  fieldProps={{
                    addonAfter: 'kW',
                  }}
                />
              </Col>
              <Col span={12}>
                <ProFormDigit
                  name={'capMax'}
                  label={intl.formatMessage({ id: 'device.maxCapacity' })}
                  rules={[{ required: true, message: '请输入最大容量' }]}
                  fieldProps={{
                    addonAfter: 'kVA',
                  }}
                />
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormDigit
                  name={'ratedVol'}
                  label={intl.formatMessage({ id: 'device.ratedGridVoltage' })}
                  rules={[{ required: true, message: '请输入额定电网电压' }]}
                  fieldProps={{
                    addonAfter: 'V',
                  }}
                />
              </Col>
              <Col span={12}>
                <ProFormText label={intl.formatMessage({ id: 'device.voltageRangeGrid' })}>
                  <Space>
                    <ProFormDigit name={'volGridOnMin'} noStyle />
                    <span>~</span>
                    <ProFormDigit
                      name={'volGridOnMax'}
                      noStyle
                      fieldProps={{
                        addonAfter: 'V',
                      }}
                    />
                  </Space>
                </ProFormText>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormText label={intl.formatMessage({ id: 'device.voltageRangeOffGrid' })}>
                  <Space>
                    <ProFormDigit name={'volGridOffMin'} noStyle />
                    <span>~</span>
                    <ProFormDigit
                      name={'volGridOffMax'}
                      noStyle
                      fieldProps={{
                        addonAfter: 'V',
                      }}
                    />
                  </Space>
                </ProFormText>
              </Col>
              <Col span={12}>
                <ProFormDigit
                  name={'ratedCur'}
                  label={intl.formatMessage({ id: 'device.ratedCurrent' })}
                  rules={[{ required: true, message: '请输入额定电流' }]}
                  fieldProps={{
                    addonAfter: 'A',
                  }}
                />
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormDigit
                  name={'curMax'}
                  label={intl.formatMessage({ id: 'device.maxOperatingCurrent' })}
                  rules={[{ required: true, message: '请输入最大运行电流' }]}
                  fieldProps={{
                    addonAfter: 'A',
                  }}
                />
              </Col>
              <Col span={12}>
                <ProFormDigit
                  name={'ratedFreq'}
                  label={intl.formatMessage({ id: 'device.ratedGridFrequency' })}
                  rules={[{ required: true, message: '请输入额定电网频率' }]}
                  fieldProps={{
                    addonAfter: 'Hz',
                  }}
                />
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormText
                  label={intl.formatMessage({ id: 'device.frequencyRange' })}
                  required={true}
                >
                  <Space>
                    <ProFormDigit name={'freqMin'} noStyle />
                    <span>~</span>
                    <ProFormDigit
                      name={'freqMax'}
                      noStyle
                      fieldProps={{
                        addonAfter: 'Hz',
                      }}
                    />
                  </Space>
                </ProFormText>
              </Col>
              <Col span={12}>
                <ProFormDigit
                  name={'thdiGridOn'}
                  label={intl.formatMessage({ id: 'device.thdiGrid' })}
                />
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormDigit
                  name={'thdiGridOff'}
                  label={intl.formatMessage({ id: 'device.thdiOffGrid' })}
                />
              </Col>
              <Col span={12}>
                <ProFormText
                  label={intl.formatMessage({ id: 'device.powerFactorRange' })}
                  required={true}
                >
                  <Space>
                    <ProFormDigit name={'powerFactorMin'} noStyle />
                    <span>~</span>
                    <ProFormDigit name={'powerFactorMax'} noStyle />
                  </Space>
                </ProFormText>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormText
                  name={'overloadCap'}
                  label={intl.formatMessage({ id: 'device.overloadCapability' })}
                />
              </Col>
              <Col span={12}>
                <ProFormText
                  name={'ratedConvertTime'}
                  label={intl.formatMessage({ id: 'device.ratedPowerTransitionTime' })}
                  rules={[{ required: true, message: '请输入响应时间' }]}
                />
              </Col>
            </Row>
          </>
        ) : (
          <>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormDigit
                  name={'ratedPower'}
                  label={intl.formatMessage({ id: 'device.ratedPower' })}
                  rules={[{ required: true, message: '请输入额定功率' }]}
                  fieldProps={{
                    addonAfter: 'kW',
                  }}
                />
              </Col>
              <Col span={12}>
                <ProFormDigit
                  name={'ratedVol'}
                  label={intl.formatMessage({ id: 'device.ratedVoltage' })}
                  rules={[{ required: true, message: '请输入额定电压' }]}
                  fieldProps={{
                    addonAfter: 'V',
                  }}
                />
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormText label={intl.formatMessage({ id: 'device.acVoltageRange' })}>
                  <Space>
                    <ProFormDigit name={'volMin'} noStyle />
                    <span>~</span>
                    <ProFormDigit
                      name={'volMax'}
                      noStyle
                      fieldProps={{
                        addonAfter: 'V',
                      }}
                    />
                  </Space>
                </ProFormText>
              </Col>
              <Col span={12}>
                <ProFormText
                  name={'wiringType'}
                  label={intl.formatMessage({ id: 'device.wiringMethod' })}
                />
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormText label={intl.formatMessage({ id: 'device.powerFactorRange' })}>
                  <Space>
                    <ProFormDigit name={'powerFactorMin'} noStyle />
                    <span>~</span>
                    <ProFormDigit name={'powerFactorMax'} noStyle />
                  </Space>
                </ProFormText>
              </Col>
              <Col span={12}>
                <ProFormText label={intl.formatMessage({ id: 'device.frequencyRange' })}>
                  <Space>
                    <ProFormDigit name={'freqMin'} noStyle />
                    <span>~</span>
                    <ProFormDigit
                      name={'freqMax'}
                      noStyle
                      fieldProps={{
                        addonAfter: 'Hz',
                      }}
                    />
                  </Space>
                </ProFormText>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormText
                  name={'overloadCap'}
                  label={intl.formatMessage({ id: 'device.overloadCapability' })}
                />
              </Col>
              <Col span={12}>
                <ProFormText
                  name={'curDistRate'}
                  label={intl.formatMessage({ id: 'device.currentDistortion' })}
                />
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormDigit
                  name={'acVolHar'}
                  label={intl.formatMessage({ id: 'device.acVoltageHarmonic' })}
                  fieldProps={{
                    prefix: '≤',
                    addonAfter: '%',
                  }}
                />
              </Col>
              <Col span={12}>
                <ProFormDigit
                  name={'dcComponent'}
                  label={intl.formatMessage({ id: 'device.dcComponent' })}
                  fieldProps={{
                    prefix: '≤',
                    addonAfter: '%',
                  }}
                />
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <ProFormDigit
                  name={'offGridOutputVol'}
                  label={intl.formatMessage({ id: 'device.offGridOutputVoltage' })}
                  fieldProps={{
                    addonAfter: 'V',
                  }}
                />
              </Col>
            </Row>
          </>
        )}
      </ProForm>
    </>
  );
};
export default ACParams;
